<template>
  <div class="table">
    <div class="container">
      <div class="crumbs"><i class="el-icon-tickets"></i>歌单————歌曲管理</div>
      <div class="handle-box">
        <el-input
          v-model="select_word"
          class="handle-input mr10"
          size="small"
          placeholder="请输入歌曲名字"
        ></el-input>
        <el-button
          type="primary"
          size="small"
          @click="centerDialogVisible = true"
          >添加歌曲</el-button
        >
      </div>
    </div>
    <el-table
      ref="multipleTable"
      border
      size="small"
      style="width: 100%"
      height="580px"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column
        width="200"
        prop="name"
        label="歌手-歌名"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template v-slot="scope">
          <el-button
            size="small"
            type="danger"
            @click="deleteRow(scope.$index, scope.row.id, tableData)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加歌曲弹出框 -->
    <el-dialog
      title="添加歌曲"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <el-form label-width="80px" :model="registerForm">
        <el-form-item label="歌曲名字" prop="songName">
          <el-select
            remote
            reserve-keyword
            :remote-method="remoteMethod"
            :loading="loading"
            filterable
            v-model="registerForm.songName"
            placeholder="歌曲名字筛选"
          >
            <el-option
              v-for="item in songList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSong">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mixin } from "../mixins";
import { listSongDetail } from "../api/index";
export default {
  mixins: [mixin],
  data() {
    return {
      loading: false,
      fits: "cover",
      //添加歌手对话框
      centerDialogVisible: false,
      //删除对话框
      delVisible: false,
      tempDate: [],
      select_word: "",

      idx: -1,

      //编辑框
      editorForm: {
        // 编辑框信息
        id: "",
        name: "",
        introduction: "",
      },

      //添加歌曲
      song: {},

      registerForm: {
        // 添加框信息
        songName: "",
        singerName: "",
      },
      tableData: [],

      songList: [],

      listSong: {
        song_id: "",
        song_list_id: "",
      },

      //批量删除数组
      multipleSelection: [],
      //歌单id
      song_list_id: "",
    };
  },

  created() {
    const _this = this;
    _this.song_list_id = _this.$route.query.id;
    _this.getData();
  },

  watch: {
    //搜索框内容监听
    select_word: function () {
      if (this.select_word === "") {
        this.tableData = this.tempDate;
      } else {
        this.tableData = [];
        for (let item of this.tempDate) {
          if (item.name.includes(this.select_word)) {
            this.tableData.push(item);
          }
        }
      }
    },
  },

  methods: {
    //远程搜索功能监听方法
    remoteMethod(query) {
      const _this = this;
      query = query.replace(/\s*/g, "");
      if (query.length > 0) {
        _this.loading = true;
        setTimeout(() => {
          _this.loading = false;
          _this.queryMethod(query);
        }, 2000);
      } else {
        _this.songList = [];
      }
    },
    //远程搜索的接口
    queryMethod(query) {
      const _this = this;
      _this.$axios
        .get("http://localhost:1109/song/songOfName?name=" + query)
        .then((res) => {
          _this.songList = res.data;
        });
    },
    // 获取歌单歌曲
    getData() {
      const _this = this;
      _this.tableData = [];
      _this.tempDate = [];
      listSongDetail(_this.song_list_id).then((res) => {
        _this.tableData = res;
      });
    },

    // 添加歌曲
    addSong() {
      const _this = this;
      _this.listSong.song_id = _this.registerForm.songName;
      _this.listSong.song_list_id = _this.song_list_id;
      _this.$axios
        .post("http://localhost:1109/listSong/add", _this.listSong)
        .then((res) => {
          if (res.data.code == 1) {
            _this.listSong = {};
            _this.getData();
            _this.$notify({
              title: "添加歌曲成功",
              type: "success",
            });
          } else {
            if (res.data.code == 3) {
              _this.getData();
              _this.$notify({
                title: "歌单中已有重复歌曲",
                type: "error",
              });
            } else {
              _this.$notify({
                title: "添加歌曲失败",
                type: "error",
              });
            }
          }
        });
      _this.centerDialogVisible = false;
    },

    //删除歌单中的一首歌
    deleteRow(index, id, rows) {
      const _this = this;
      // let id = _this.idx;
      console.log(id + "" + _this.song_list_id);
      _this.listSong.song_id = id;
      _this.listSong.song_list_id = _this.song_list_id;
      _this.$axios
        .post("http://localhost:1109/listSong/delete", _this.listSong)
        .then((res) => {
          if (res.data.code == 1) {
            rows.splice(index, 1);
            _this.listSong = {};
            _this.getData();
            _this.$notify({
              title: "删除歌曲成功",
              type: "success",
            });
          } else {
            _this.$notify({
              title: "删除歌曲失败",
              type: "error",
            });
          }
        });
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.song-img {
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.pagination {
  display: flex;
  justify-content: center;
}
.play {
  position: absolute;
  z-index: 100;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  top: 18px;
  left: 15px;
}
.icon {
  width: 2em;
  height: 2em;
  color: white;
  fill: currentColor;
  overflow: hidden;
}
</style>